<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 400px;
        height: 200px;
        border: 1px dashed black;
        margin-bottom: 20px;
      }
      #btn2,
      #btn1 {
        margin-left: 140px;
      }
      .fdbox1,
      .fdbox2 {
        overflow: hidden;
      }
      .fdbox1 div {
        border: 1px solid black;
        float: left;
      }
      .fdbox2 div {
        border: 1px solid black;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div>网站名（key）：<input type="text" id="input1" /></div>
      <div>网址(value)：<input type="text" id="input2" /></div>
      <button id="btn1"><b>新增记录</b></button>
      <hr />
      <div>输入网站名：<input type="text" id="input3" /></div>
      <button id="btn2"><b>查找网站</b></button>
      <div id="textps"></div>
    </div>
  </body>
  <script>
    let input1 = document.getElementById("input1");
    let input2 = document.getElementById("input2");
    let input3 = document.getElementById("input3");
    let textps = document.getElementById("textps");
    var str = "";
    document.getElementById("btn1").onclick = function () {
      if (input1.value == str) {
        alert("key不能为空");
      } if (input2.value == str) {
        alert("value不能为空");
      }else {
        localStorage.setItem(input1.value, input2.value);
        // console.log(key1);
        alert("操作成功");
      }
    };
    console.log(btn2);
    document.getElementById("btn2").onclick = function () {
      localStorage.getItem(input1.value);

      console.log(input3.value);
      console.log(localStorage.getItem(input3.value));
      textps.innerHTML = `${input3.value}的网址是：${localStorage.getItem(
        input3.value
      )}`;
    };
  </script>
</html>
